<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用$.get()方法</title>
    <link rel="stylesheet" href="./css/news.css">
</head>

<body>
    <div id="container">
        <nav>
            <ul>
                <li>电视类</li>
                <li>电影类</li>
                <li>明星类</li>
                <li>音乐类</li>
                <li>体育类</li>
                <li>财经类</li>
                <li>军事类</li>
            </ul>
        </nav>
        <article></article>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script>
    $(document).ready(function () {

        // 设置中的分类
        function setNav(index = 0) {
            $("#container nav ul li").removeClass(); // 删除菜单栏所有li标签的类名
            $(`#container nav ul li:nth-child(${index+1})`).addClass("active")// 为索引对应的元素添加avtive选中类
            // 当设置完分类后 获取分类对应的新闻
            let newsCate = [
                "BA10TA81wangning", // 电视
                "BD2A9LEIwangning", // 电影
                "BD2AB5L9wangning", // 明星
                "BD2AC4LMwangning", // 音乐
                "BA8E6OEOwangning", // 体育
                "BA8EE5GMwangning", // 财经
                "BAI67OGGwangning"   // 军事
            ];
            // 切换之前先清空原有分类数据
            $("article").html("")
            // newsCate[index] 取出分类对应的字符串
            // 调用getNews将字符串传递到getNews方法形参中
            getNews(newsCate[index]);
        }
        setNav(0)

        // 切换分类事件
        $("#container nav ul li").click(function(){
            let idx = $(this).index();// 获取点击的li元素索引
            setNav(idx)// 调用封装好方法 设置选中效果
        })

        function getNews(c) {// c用来接收newsCate[index]传递过来的字符串
            // $.get(网址，数据，回调函数)
            // 没事数据给服务器时写一个空对象{}
            $.get(`https://3g.163.com/touch/reconstruct/article/list/${c}/0-10.html`, {}, function (res) {
                let end = res.length - 10;
                let jsonDate = res.substr(9, end);
                let objectData = JSON.parse(jsonDate);
                // objectData["BA10TA81wangning"]只能取出一个分类的数据 使用形参c代替"BA10TA81wangning"可以灵活获取
                let newsList = objectData[c];
                for (let i = 0; 1 < newsList.length; i++) {
                    // 取出新闻对象 赋值给变量elemNews
                    let elemNews = newsList[i];
                    // 把elemNews内的数据绑定到n变量字符串中
                    let n = `<div class="news" title="${elemNews.title}">
                            <div class="left">
                                <img src="${elemNews.imgsrc}" alt="${elemNews.title}" srcset="">
                            </div>
                            <div class="right">
                                <h2>${elemNews.title}</h2>
                                <p>${elemNews.digest}</p>
                                <div>
                                    <time>${elemNews.ptime}</time>
                                    <span>${elemNews.source}</span>
                                    <span>${elemNews.commentCount}</span>
                                </div>
                            </div>
                        </div>`
                    //使用jQuery把新闻插入到网页上 
                    $("article").append($(n));
                    // $(n)将n中html字符串转化成jQuery可操作的jQuery对象
                }
            })
        }
    })

</script>

</html>